<template>
    <div id="frontheader">
        <div style="display: flex;">
            <div class="logo">
                <img src="../../../assets/img/logo.png" alt="logo">
            </div>
            <div class="title">
                <p>社区养老服务系统</p>
            </div>
        </div>
        <div class="menu">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                background-color="#87CEFA" text-color="#696969" active-text-color="#FFFFFF" :ellipsis="false" router>
                <el-menu-item index="/front/home/FrontHomeView">首页</el-menu-item>
                <el-menu-item index="/front/activity/FrontActivityView">社区活动</el-menu-item>
                <el-menu-item index="/front/service/FrontServiceView">社区服务</el-menu-item>
                <el-menu-item index="/front/dining/FrontDiningView">餐饮服务</el-menu-item>
                <el-menu-item index="/front/news/NewsListView">新闻资讯</el-menu-item>
                <el-menu-item index="/front/health">健康管理</el-menu-item>
                <el-menu-item index="/front/personal/PersonalCenter">个人中心</el-menu-item>
            </el-menu>
        </div>
        <div class="user">
            <el-dropdown class="selectmenu" @command="handleDropdown">
                <span class="el-dropdown-link">
                    {{ username }}
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="MyActivityView">活动记录</el-dropdown-item>
                        <el-dropdown-item command="MyServiceView">服务订单</el-dropdown-item>
                        <el-dropdown-item command="MyReportView">体检报告</el-dropdown-item>
                        <el-dropdown-item command="HealthHome">健康记录</el-dropdown-item>
                        <!-- <el-dropdown-item command="MyPoint">我的积分</el-dropdown-item> -->
                        <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ArrowDown } from '@element-plus/icons-vue'

const activeIndex = ref('1')
const activeIndex2 = ref('1')
const handleSelect = (key, keyPath) => {
    console.log(key, keyPath)
}

const username = ref('')
const router = useRouter()

try {
    const userStr = localStorage.getItem('user')
    if (userStr) {
        const userData = JSON.parse(userStr)
        username.value = userData.username
    } else {
        // 如果用户未登录，跳转到登录页
        router.push('/login')
    }
} catch (error) {
    console.error('Error parsing user data:', error)
    router.push('/login')
}

const handleDropdown = (command) => {
    switch (command) {
        case 'MyActivityView':
            router.push('/front/myActivity/MyActivityView');
            break;
        case 'MyServiceView':
            router.push('/front/myService/MyServiceView');
            break;
        case 'MyReportView':
            router.push('/front/myReport/MyReportView');
            break;
        case 'HealthHome':
            router.push('/front/health');
            break;
        default:
            break;
    }
}

const logout = () => {
    // 清除所有存储的信息
    localStorage.removeItem('user')
    localStorage.removeItem('token')
    localStorage.removeItem('roleId')
    localStorage.removeItem('id')
    router.push('/login')
}
</script>

<style scoped>
#frontheader {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #85c8e6 0%, #70b2f0 100%);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    height: 70px;
    padding: 0 24px;
    justify-content: space-between;

    .logo {
        margin-right: 15px;

        img {
            height: 50px;
            border-radius: 8px;
            transition: transform 0.3s;
        }

        img:hover {
            transform: scale(1.05);
        }
    }

    .title {
        p {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            font-size: 24px;
            font-weight: 600;
            color: #fff;
            margin: 0;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
        }
    }

    .menu {
        flex: 1;
        display: flex;
        justify-content: center;
    }

    .user {
        margin-left: 20px;
    }

    .el-menu.el-menu--horizontal {
        border-bottom: none;
        background: transparent;
    }

    .el-menu-item {
        font-size: 16px;
        font-weight: 500;
        height: 70px;
        line-height: 70px;
        padding: 0 20px;
        transition: all 0.3s;
    }

    .el-menu-item:hover {
        background-color: rgba(255, 255, 255, 0.1) !important;
    }

    .el-menu-item.is-active {
        font-weight: 600;
        background-color: rgba(255, 255, 255, 0.2) !important;
        position: relative;
    }

    .el-menu-item.is-active::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 24px;
        height: 3px;
        background-color: #fff;
        border-radius: 2px;
    }
}

:deep(.el-dropdown-link) {
    color: white;
    cursor: pointer;
    font-size: 15px;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.2);
    transition: background-color 0.3s;
}

:deep(.el-dropdown-link:hover) {
    background-color: rgba(255, 255, 255, 0.3);
}

:deep(.el-dropdown-link:focus-visible) {
    outline: unset;
}
</style>